<template>
  <BaseDialog
    ref="baseDialog"
    :title="isEdit ? '编辑角色' : '新增角色'"
    @confrim="confrim"
    @cancel="close"
  >
    <BaseForm
      labelWidth="150px"
      :fromIems="fromIems"
      :size="'medium'"
      ref="BaseForm"
      @submit="submit"
      @edit="edit"
    >
      <!-- <template #tree>
        <el-tree
          ref="tree"
          default-expand-all
          :data="treeData"
          check-strictly
          show-checkbox
          node-key="id"
          :props="{
            children: 'children',
            label: 'name',
          }"
          @check-change="handleNodeClick"
        ></el-tree>
      </template> -->
    </BaseForm>
  </BaseDialog>
</template>

<script>
import { Message } from "element-ui";
import { getId } from "@/api/common";
import { add,edit } from "@/api/role";
export default {
  name: "add",
  data() {
    return {
      title: "",
      fromIems: [
        {
          valueType: "input",
          label: "角色名称",
          dataIndex: "name",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        // {
        //   valueType: "tree",
        //   label: "角色权限",
        //   dataIndex: "code",
        //   slotName: "tree",
        //   rules: [{ required: true, message: "请选择", trigger: "blur" }],
        // },
      ],
      isEdit: false,
      treeData: [],
    };
  },
  methods: {
    open(row) {
      row ? (this.isEdit = true) : (this.isEdit = false);
      this.$refs.baseDialog.open();
      this.$nextTick(() => {
        if (row) {
          for (var k in row) {
            this.$set(this.$refs.BaseForm.form, k, row[k]);
          }
        } else {
          this.$refs.BaseForm.form = {};
        }
      });
    },

    handleNodeClick(data, ischeck) {
      console.log(data, ischeck);
      // 不是顶级节点 设置父节点勾选
      //   if (ischeck && data.parentId != 0) {
      //     this.$refs.tree.setChecked(data.parentId, true);
      //   }
      if (ischeck && data.children) {
        data.children.forEach((el) => {
          this.$refs.tree.setChecked(el.id, true);
        });
      }
      if (!ischeck && data.children) {
        data.children.forEach((el) => {
          this.$refs.tree.setChecked(el.id, false);
        });
      }

      console.log(this.$refs.tree.getCheckedKeys(), "已选择");
    },
    close() {
      this.$refs.baseDialog.close();
      this.$refs.BaseForm.rest();
    },
    confrim() {
      if (this.isEdit) {
        this.$refs.BaseForm.edit();
      } else {
        this.$refs.BaseForm.submit();
      }
    },
    async submit(data) {
      const result = await getId({type:'role'})
      let params  = {...data}
      params.roleId = result.content.id
      const res = await add(params);
      if (res.status == 0) {
        this.$emit("success");
        Message.success("success");
        this.close();
      }
    },
    async edit(data) {
      const res = await edit({
        roleId:data.roleId,
        name:data.name
      });
      if (res.status == 0) {
        this.$emit("success");
        Message.success("success");
        this.close();
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
